<template>
  <div class="remarkUser">
    <p>用户评价</p>
    <div class="remark">
      <div class="remarkLeft">
        <div>8.0</div>
        <img src="../../assets/images/remark8.png" alt="" />
        <p>802人评价</p>
      </div>
      <div class="remarkRight">
        <div class="remarkrightArea">
          <img src="../../assets/images/remarkRight.png" alt="" />
          <div class="remarkRight1">
            <div class="remarkrightBac">
              <div class="bacDiv div1"></div>
            </div>
            <div class="remarkrightBac">
              <div class="bacDiv div2"></div>
            </div>
            <div class="remarkrightBac">
              <div class="bacDiv div3"></div>
            </div>
            <div class="remarkrightBac">
              <div class="bacDiv div4"></div>
            </div>
            <div class="remarkrightBac"></div>
          </div>
        </div>
        <p>高于91%的洁面产品75%的人会回购</p>
      </div>
    </div>
    <p class="remarkChat">完成肤质测试后查看同肤质评分~</p>
    <p class="remarkMore">查看各肤质评分 >></p>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {},
};
</script>

<style lang="less" scoped>
.remarkUser {
  width: 100%;
  margin-bottom: 100px;
  p {
    font-size: 34px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #000000;
    margin-bottom: 70px;
  }
  .remarkChat {
    font-size: 26px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
    margin-bottom: 35px;
  }
  .remarkMore {
    width: 100%;
    text-align: right;
    font-size: 26px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #64c8c9;
  }
}
.remarkLeft {
  width: 141px;
  text-align: center;
  div {
    font-size: 72px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #323232;
  }
  img {
    width: 100%;
  }
  p {
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #999999;
    margin-top: 20px;
  }
}
.remark {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  .remarkRight {
    padding-top: 20px;
    p {
      width: 408px;
      height: 23px;
      font-size: 24px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #64c8c9;
      line-height: 48px;
      text-align: center;
      margin-top: 23px;
    }
  }
  .remarkrightArea {
    display: flex;
    justify-content: space-between;
    img {
      width: 94px;
      height: 121px;
    }
    .remarkRight1 {
      .remarkrightBac {
        width: 280px;
        height: 12px;
        background: #e6e6e6;
        margin-bottom: 16px;
      }
    }
  }
  .bacDiv {
    background: #64c8c9;
    height: 12px;
  }
  .div1 {
    width: 132px;
  }
  .div2 {
    width: 106px;
  }
  .div3 {
    width: 34px;
  }
  .div4 {
    width: 12px;
  }
}
</style>
